<template>
  <div class="mainbox">
    <!--顶部横条-->
    <Banner></Banner>
    <!--顶部横条-->

    <main-content :catname="title">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}"><span class="iconfont icon-liuyanban-05"></span>{{title}}</dt>
          <dd @click="GetContent(index,item.id)" :class="activeDd==index?'menu_dd hover':'menu_dd'" v-for="(item,index) in cateList" :key="index">{{item.name}}</dd>
        </dl>
      </div>

      <div slot="inner_content">
        <div class="page_con">
        <!--公告公示-->
        <div class="lt_notice" style="padding-right: 0px;padding-left: 60px;">
          <!--*********************-->

          <NoData v-if="allreplys.length==0 && replys.length==0"></NoData>



          <el-tabs v-model="activeName" @tab-click="handleClick" :style="{'--activeTabColor':this.$util.storage.get('color')}">
            <el-tab-pane label="全部" name="first">
              <div style="height: 100%;">
                <div v-for="(item,index) in allreplys" @click="toListDetail(item.id)" :key="index" class="notice">
                  <p class="detail_title">{{item.title}}</p>
                  <p class="desc">{{item.reply_cont}}</p>
                  <p class="date">{{item.create_at}}</p>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="已回复" name="second">
              <div style="height: 100%;">
                <div :key="index" v-for="(item,index) in replys" @click="toListDetail(item.id)" class="notice">
                  <p class="detail_title">{{item.title}} <span class="mark">已回复</span></p>

                  <p class="desc">{{item.reply_cont}}</p>
                  <p class="date">{{item.create_at}}</p>
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>
          <!--*********************-->
        </div>
        <!--公告公示-->
        </div>
      </div>
    </main-content>

    <footerBar></footerBar>
    <!--左侧漂浮菜单-->
    <MainMenu></MainMenu>
    <!--左侧漂浮菜单-->
  </div>
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'
  import NoData from '../../components/nodata/NoData'

  export default {
    name: "message",
    data() {
      return {
        activeName: 'first',
        cateList:[],//留言板左侧菜单分类
        activeDd:0,//默认激活的左侧菜单
        allreplys:[],//全部信息
        replys:[],//已回复的信息
        menu_bg:'',
        title:'',
      }
    },
    components: {
      Banner,
      MainMenu,
      footerBar,
      mainContent,
      NoData,
    },
    created(){
      console.log('this.$util.storage.get("color")',this.$util.storage.get("color"));
      // console.log('this.$route:',this.$route.query.name);
      this.title=this.$route.query.name;
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.GetMessageCategory();
    },

    // mounted(){
    // },

    methods: {

      handleClick(tab, event) {
        console.log(tab, event);
      },

      GetContent(i,type){
        this.activeDd=i;
        // console.log('点击了留言栏目：索引i',i);
        this.$http.get("/api/ScreenkApi/getWords?type="+type+"&page=1&limit=100000&status=",{vollege_id:this.$util.vollege_id},r=>{
          console.log('全部留言板内容:',r.data.data);
          this.allreplys = r.data.data;

        });
        this.$http.get("/api/ScreenkApi/getWords?type="+type+"&status=1&page=1&limit=100000",{vollege_id:this.$util.vollege_id},r=>{
          console.log('全部留言板已回复内容:',r.data.data);
          this.replys=r.data.data;
        });
        // console.log('点击了留言栏目tyep:',type);
      },

      GetMessageCategory(){
        let that = this;
        that.$http.get("api/ScreenkApi/getWordsType",{vollege_id:this.$util.vollege_id},r=>{
              console.log('留言板分类：',r.data);
              that.cateList=r.data;
              that.$http.get("/api/ScreenkApi/getWords?type="+r.data[0].id+"&status=",{vollege_id:this.$util.vollege_id},r=>{
              console.log('全部留言板内容:',r.data.data);
              that.allreplys = r.data.data;
               });
              that.$http.get("/api/ScreenkApi/getWords?type="+r.data[0].id+"&status=1",{vollege_id:this.$util.vollege_id},r=>{
                 console.log('全部留言板已回复内容:',r.data.data);
                that.replys=r.data.data;
               });
        });
      },

      toListDetail(id) {
        console.log('您点击了跳转路由事件！id:',id);
        this.$router.push("/msg_detail?id="+id);
      },
    },
  }
</script>

<style scoped>

  .inner_content{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 60px !important;
    padding-left: 50px !important;
  }
  .page_con{
    font-size: 24px !important;
    line-height: 40px !important;
    padding-right: 0px !important;
    width: 1300px !important;
    box-sizing: border-box;

  }



  .lists_index {
    width: 100vw;
    height: 1080px;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }
  .inner_content{
    box-sizing: border-box;
    padding-top: 30px;
  }
  .lt_notice {
    /*padding: 56px 50px 0 240px;*/
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .it_notice {
    height: 667px;
    width: 1620px;
  }
  .lt_notice >>> .el-tabs__item {
    font-size: 24px;

  }

  .lt_notice >>> .el-tabs__item.is-active {
    /*color: #29be74;*/
    color: var(--activeTabColor) !important;
  }

  .lt_notice >>> .el-tabs__active-bar {
    background-color: var(--activeTabColor) !important;
  }

  .detail_title .mark {
    padding-left: 10px;
    font-size: 24px;
    color:#f10008;
    border-left: 3px solid #f10008;
  }
  .desc{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .notice{
    height: 190px;
  }

</style>
